﻿/* RESET */
* {
    margin: 0;
    padding: 0;
}

/* Gameboard */
@font-face {
    font-family: DS-Digital;
    src: url('../Fonts/DS-DIGIB.TTF');
}

body {
    overflow: hidden;
    background-image: url(../Images/background.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

#container {
    width: 1000px;
    display: none;
    margin: 15px auto;
}

#wrapper {
    width: 660px;
    display: inline-block;
}


#gameboard table {
    background: #000;
    border-collapse: collapse;
    outline: 5px solid #ffffff;
    margin: 0 auto;
}

#scoreboard {
    display: inline-block;
    float: right;
    margin-top: 60px;
}

/* Blocks */
td {
    width: 25px;
    height: 25px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #63b8ee), color-stop(1, #468ccf));
    background: -moz-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
    background: -webkit-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
    background: -o-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
    background: -ms-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
    background: linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#63b8ee', endColorstr='#468ccf',GradientType=0);
    background-color: #63b8ee;
    -moz-box-shadow: inset 0px 1px 0px 0px #bee2f9;
    -webkit-box-shadow: inset 0px 1px 0px 0px #bee2f9;
    box-shadow: inset 0px 1px 0px 0px #bee2f9;
    border: 1px solid #000;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    cursor: pointer;
    font-family:'Arial Black', Gadget, sans-serif;
    font-size: 16px;
    font-weight: bolder;
    text-align: center;
    -webkit-text-shadow: 0px 1px 0px #7cacde;
    text-shadow: 0px 1px 0px #7cacde;
}

td.hidden:not(.open):not(.flag):not(.question):not(.mine):hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #468ccf), color-stop(1, #63b8ee));
    background:-moz-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
    background:-webkit-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
    background:-o-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
    background:-ms-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
    background:linear-gradient(to bottom, #468ccf 5%, #63b8ee 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#468ccf', endColorstr='#63b8ee',GradientType=0);
    background-color:#468ccf;
}

td.hidden:not(.open):not(.flag):not(.question):not(.mine):active {
    position:relative;
    top:1px;
}

.open {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
    background: -moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background: -webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background: -o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background: -ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background: linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
    -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-text-shadow: 0px 1px 0px #ffffff;
    text-shadow: 0px 1px 0px #ffffff;
}
            
.flag {
    background-image: url(../Images/flag-25.png);
    background-repeat: no-repeat;
}

.question {
    background-image: url(../Images/question-25.png);
    background-repeat: no-repeat;
}
    
.mine {
    background: url(../Images/mine-gray-25.png), -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
    background: url(../Images/mine-gray-25.png), -moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background: url(../Images/mine-gray-25.png), -webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background: url(../Images/mine-gray-25.png), -o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background: url(../Images/mine-gray-25.png), -ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background: url(../Images/mine-gray-25.png), linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
    background-color:#ffec64;
    background-repeat: no-repeat;
    -moz-box-shadow:inset 0px 1px 0px 0px #fff6af;
    -webkit-box-shadow:inset 0px 1px 0px 0px #fff6af;
    box-shadow:inset 0px 1px 0px 0px #fff6af;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    -webkit-text-shadow: 0px 1px 0px #ffffff;
    text-shadow: 0px 1px 0px #ffffff;
}          

/* Start Menu */
#start-menu {
    display: none;
    width: 450px;
    text-align: center;
    background-color: #CAE2DE;
    position: relative;
    padding: 20px 0px;
    margin: 50px auto;
}

h1#levels {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    margin: 0px 126px;
    text-align: center;
    margin-bottom: 20px;
    padding: 5px 0;
}

.level-btn {
    width: 250px;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background: -moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color: #ededed;
    -moz-box-shadow: inset 0px 1px 15px -10px #ffffff;
    -webkit-box-shadow: inset 0px 1px 15px -10px #ffffff;
    box-shadow: inset 0px 1px 15px -10px #ffffff;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    display: inline-block;
    color: #777777;
    font-family: arial;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    -webkit-text-shadow: 1px 1px 0px #ffffff;
    text-shadow: 1px 1px 0px #ffffff;
    margin-bottom: 10px;
    padding: 10px 24px;
}

.level-btn:hover {
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background: -moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color: #dfdfdf;
}

.level-btn:active {
	position: relative;
	top: 1px;
}

/* Navs */
#top-nav, #bottom-nav {
    color: white;
    font-family: DS-Digital, Impact,  Haettenschweiler,  'Arial Narrow Bold',  sans-serif;
    font-size: 20px;   
    font-weight: bold;
    text-align: center;
    padding-bottom: 20px;     
}

#bottom-nav {
    margin-top: 20px;
}

#remaining-mines, #remaining-blocks, #current-level {
    width: 80px;
    background: black;
    -webkit-box-shadow: 0px 0px 10px #fff;
    box-shadow: 0px 0px 10px #fff;
    border: 3px double #808080;
    display: inline-block;
    padding: 5px;
}

#remaining-mines {
    background-image: url(../Images/mine-gray-25.png);
    background-repeat: no-repeat;
    background-position: 2px 2px;
    padding-left: 25px;
}

#remaining-blocks {
    background-image: url(../Images/yes-25.png);
    background-repeat: no-repeat;
    background-position: 2px 2px;
    padding-left: 25px;
}

#timer {
    width: 100px;
    height: 32px;
    background-image: url(../Images/clock.png);
    background-repeat: no-repeat;
    display: inline-block;
    padding-top: 15px;
}

#newgame-btn, #pause-btn {
    color: #000;
    width: 100px;
    background: #fff;
    -webkit-box-shadow: 0px 0px 10px #fff;
    box-shadow: 0px 0px 10px #fff;
    border: 3px double #808080;
    display: inline-block;
    padding: 5px;
    font-family: DS-Digital, Impact,  Haettenschweiler,  'Arial Narrow Bold',  sans-serif;
    font-size: 20px;   
    font-weight: bold;
    text-align: center;
}

#newgame-btn:hover, #pause-btn:hover {
    background: #bee2f9;
    cursor: pointer;
}

#newgame-btn:active, #pause-btn:active {
    position: relative;
    top: 1px;
}

/* Scoreboard */
.ui-tabs-panel {
    height: 300px;
    float: right;
}

.ui-tabs-panel > table > tbody > tr > td {
    background: #fff;
    border: 0;
    border-bottom: 2px solid #000;
    border-radius: 0;
    -webkit-box-shadow: #fff 0px 0px 0px;
    box-shadow: #fff 0px 0px 0px;
    font-size: 14px;
}

.ui-tabs-panel > table > tbody > tr > td:first-of-type {
    width: 40px;
}

.ui-tabs-panel > table > tbody > tr > td:nth-of-type(2) {
    width: 130px;
}

.ui-tabs-panel > table > tbody > tr > td:last-of-type {
    width: 60px;
}